<template>
	<div class="main">
		<div class="div_img"><img src="../../assets/images/Group3.png" /></div>
		<input placeholder="药品名查询" type="text" v-model="name" />
		<div class="button" @click="toResult">查   询</div>
    <p>输入药品名称的关键词或全称进行搜索， 如：阿莫西林、感冒颗粒等（此目录信息为2017版）。</p>
	</div>
</template>

<script>
  export default {
    data () {
      return {
        name:'',
      }
    },
    methods: {
      toResult(){
          if(this.name){
            this.$router.push({path:'/other/drugsList',query:{name:this.name}})
          }else {
            this.$toast({
              message: "请输入药品名称",
              duration: 3000
            });
          }
      }
    }
  }
</script>

<style  lang="less" scoped>
	.div_img{width: 75px;height: 75px;margin: 68px auto 55px auto;}
	img{width: 100%;height: 100%;}
  input{background: #FFFFFF url("../../assets/images/icon/icon-magnifier.png") no-repeat left 10px center;background-size: 18px;
    padding-left: 35px; border: 1px solid #D2D2D2; border-radius: 4px;width: 90%;margin: 0 5%;height: 45px;box-sizing: border-box;}
	.button{width: 90%;color: #FFFFFF;background: #3399ff;border-radius: 6px;margin: 40px auto 10px;text-align: center;font-size: 18px;line-height: 45px;}
  p{font-size: 13px;display: block;width: 90%;margin: 0 auto;text-indent: 25px;}
</style>
